home *** CD-ROM | disk | FTP | other *** search
/ PC World Komputer 2010 April / PCWorld0410.iso / pluginy Firefox / 60 / 60.xpi / chrome / webdeveloper.jar / content / webdeveloper / dashboard / edit_css.js < prev    next >
Encoding:
Text File  |  2009-06-30  |  19.6 KB  |  555 lines
  1. var webdeveloper_editCSSIntervalId      = null;
  2. var webdeveloper_editCSSOldStyleText    = new Array();
  3. var webdeveloper_editCSSSelectedTab     = 0;
  4. var webdeveloper_editCSSUpdateFrequency = 500;
  5.  
  6. // Applies the CSS
  7. function webdeveloper_applyCSS()
  8. {
  9.     var contentDocument = webdeveloper_getContentDocument();
  10.     var headElement     = webdeveloper_getDocumentHeadElement(contentDocument);
  11.     var styleElement    = null;
  12.     var styleText       = null;
  13.     var textBox         = null;
  14.     var textBoxes       = document.getElementById("webdeveloper-edit-css-tab-panels").getElementsByTagName("textbox");
  15.     var textBoxesLength = textBoxes.length;
  16.  
  17.     // Loop through the text boxes
  18.     for(var i = 0; i < textBoxesLength; i++)
  19.     {
  20.         styleElement = contentDocument.getElementById("webdeveloper-edit-css-style-" + i);
  21.         textBox      = textBoxes[i];
  22.         styleText    = textBox.value;
  23.  
  24.         // If the strip import preference is not set or is set to true
  25.         if(!webdeveloper_isPreferenceSet("webdeveloper.edit.css.import.strip") || webdeveloper_getBooleanPreference("webdeveloper.edit.css.import.strip", true))
  26.         {
  27.             styleText = styleText.replace(new RegExp("@import.*?;", "gi"), "");
  28.         }
  29.  
  30.         // If the style element does not exist
  31.         if(!styleElement)
  32.         {
  33.             styleElement = contentDocument.createElement("style");
  34.  
  35.             styleElement.setAttribute("id", "webdeveloper-edit-css-style-" + i);
  36.             styleElement.setAttribute("type", "text/css");
  37.             styleElement.setAttribute("xml:base", textBox.getAttribute("webdeveloper-base"));
  38.             headElement.appendChild(styleElement);
  39.  
  40.             // Make the styles different to make sure they get written if not there already            
  41.             webdeveloper_editCSSOldStyleText[i] = styleText + " ";
  42.         }
  43.  
  44.         // If the style text is not the same as the old style text
  45.         if(styleText != webdeveloper_editCSSOldStyleText[i])
  46.         {
  47.             webdeveloper_editCSSOldStyleText[i] = styleText;
  48.  
  49.             webdeveloper_removeAllChildElements(styleElement);
  50.             styleElement.appendChild(contentDocument.createTextNode(styleText));
  51.         }
  52.     }
  53. }
  54.  
  55. // Clear the CSS
  56. function webdeveloper_clearCSS()
  57. {
  58.     webdeveloper_getSelectedPanel().firstChild.value = "";
  59. }
  60.  
  61. // Reinitializes the dashboard when the page changes
  62. function webdeveloper_editCSSPageLoad(event)
  63. {
  64.     // If the content document is set
  65.     if(webdeveloper_getPageLoadEventContentDocument(event) && !webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true))
  66.     {
  67.         webdeveloper_resetCSS();
  68.     }
  69. }
  70.  
  71. // Handles a browser tab being selected
  72. function webdeveloper_editCSSTabSelect(event)
  73. {
  74.     var browser     = window.top.getBrowser();
  75.     var selectedTab = browser.mTabBox.selectedIndex;
  76.  
  77.     // If the selected tab is different
  78.     if(selectedTab != webdeveloper_editCSSSelectedTab)
  79.     {
  80.         var browsers      = browser.browsers;
  81.         var browserLength = browsers.length;
  82.  
  83.         // If the previous selected tab equals the browser length
  84.         if(webdeveloper_editCSSSelectedTab == browserLength)
  85.         {
  86.             webdeveloper_editCSSSelectedTab = browserLength - 1;
  87.         }
  88.  
  89.         webdeveloper_resetDocument(browsers[webdeveloper_editCSSSelectedTab].contentDocument);
  90.  
  91.         webdeveloper_editCSSSelectedTab = selectedTab;
  92.  
  93.         // If the CSS stick preference is not set to true
  94.         if(!webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true))
  95.         {
  96.             webdeveloper_resetCSS();
  97.         }
  98.     }
  99. }
  100.  
  101. // Returns the selected panel
  102. function webdeveloper_getSelectedPanel()
  103. {
  104.     var selectedPanel = document.getElementById("webdeveloper-edit-css-tab-box").selectedPanel;
  105.  
  106.     // If the selected panel is not set
  107.     if(!selectedPanel)
  108.     {
  109.         selectedPanel = document.getElementById("webdeveloper-edit-css-tab-panels").firstChild;
  110.     }
  111.  
  112.     return selectedPanel;
  113. }
  114.  
  115. // Returns the selected tab
  116. function webdeveloper_getSelectedTab()
  117. {
  118.     var selectedTab = document.getElementById("webdeveloper-edit-css-tab-box").selectedTab;
  119.  
  120.     // If the selected tab is not set
  121.     if(!selectedTab)
  122.     {
  123.         selectedTab = document.getElementById("webdeveloper-edit-css-tabs").firstChild;
  124.     }
  125.  
  126.     return selectedTab;
  127. }
  128.  
  129. // Initializes the edit CSS dashboard
  130. function webdeveloper_initializeEditCSS()
  131. {
  132.     var windowContent = window.top.getBrowser();
  133.  
  134.     // If the window content is set
  135.     if(windowContent)
  136.     {
  137.         var tabBox = windowContent.mTabBox;
  138.     
  139.         webdeveloper_editCSSSelectedTab     = tabBox.selectedIndex;
  140.         webdeveloper_editCSSUpdateFrequency = webdeveloper_getIntegerPreference("webdeveloper.edit.update.frequency", true);
  141.     
  142.         document.getElementById("webdeveloper-search-dashboard-text").addEventListener("keypress", webdeveloper_searchTextKeyPress, false);        
  143.         windowContent.addEventListener("load", webdeveloper_editCSSPageLoad, true);
  144.  
  145.         // If the tab box is set
  146.         if(tabBox)
  147.         {
  148.             tabBox.addEventListener("select", webdeveloper_editCSSTabSelect, false);
  149.         }
  150.     
  151.         webdeveloper_updateStickCSS();
  152.         webdeveloper_retrieveCSS();
  153.     
  154.         // If the update frequency is greater than 0
  155.         if(webdeveloper_editCSSUpdateFrequency > 0)
  156.         {
  157.             webdeveloper_editCSSIntervalId = window.setInterval(webdeveloper_applyCSS, webdeveloper_editCSSUpdateFrequency);
  158.         }
  159.     }
  160. }
  161.  
  162. // Opens new CSS
  163. function webdeveloper_openCSS()
  164. {
  165.     var filePicker   = Components.classes["@mozilla.org/filepicker;1"].createInstance(Components.interfaces.nsIFilePicker);
  166.     var stringBundle = document.getElementById("webdeveloper-string-bundle");
  167.  
  168.     filePicker.appendFilter(stringBundle.getString("webdeveloper_styleSheetDescription"), "*.css");
  169.     filePicker.init(window, stringBundle.getString("webdeveloper_openStyleSheet"), filePicker.modeOpen);
  170.  
  171.     // If the user selected a style sheet
  172.     if(filePicker.show() == filePicker.returnOK)
  173.     {
  174.         var inputStream      = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
  175.         var scriptableStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
  176.  
  177.         inputStream.init(filePicker.file, 0x01, 00444, null);
  178.         scriptableStream.init(inputStream);
  179.  
  180.         webdeveloper_getSelectedPanel().firstChild.value = scriptableStream.read(scriptableStream.available());
  181.  
  182.         scriptableStream.close();
  183.         inputStream.close();
  184.     }
  185. }
  186.  
  187. // Resets the edited CSS
  188. function webdeveloper_resetCSS()
  189. {
  190.     webdeveloper_removeAllChildElements(document.getElementById("webdeveloper-edit-css-tab-panels"));
  191.     webdeveloper_removeAllChildElements(document.getElementById("webdeveloper-edit-css-tabs"));
  192.     webdeveloper_resetDocument(webdeveloper_getContentDocument());
  193.     webdeveloper_retrieveCSS();
  194. }
  195.  
  196. // Resets the specified document
  197. function webdeveloper_resetDocument(contentDocument)
  198. {
  199.     var styleElement     = null;
  200.     var styleElements    = contentDocument.getElementsByTagName("style");
  201.     var styleSheet       = null;
  202.     var styleSheetList   = webdeveloper_getStyleSheetsForDocument(contentDocument, true, false);
  203.     var styleSheetLength = styleSheetList.length;
  204.  
  205.     // Loop through the style elements
  206.     for(var i = 0; i < styleElements.length; i++)
  207.     {
  208.         styleElement = styleElements[i];
  209.  
  210.         // If the style element has an id starting with webdeveloper-edit-css-style-
  211.         if(styleElement.hasAttribute("id") && styleElement.getAttribute("id").indexOf("webdeveloper-edit-css-style-") == 0)
  212.         {
  213.             webdeveloper_removeElement(styleElement);
  214.             i--;
  215.         }
  216.     }
  217.  
  218.     // Loop through the style sheets
  219.     for(i = 0; i < styleSheetLength; i++)
  220.     {
  221.         styleSheet = styleSheetList[i];
  222.  
  223.         // If the style sheet is a valid style sheet, is for the screen and is not an alternate style sheet
  224.         if(webdeveloper_isValidStyleSheet(styleSheet) && webdeveloper_isMediaStyleSheet(styleSheet, "screen") && !webdeveloper_isAlternateStyleSheet(styleSheet))
  225.         {
  226.            styleSheet.disabled = false;
  227.         }
  228.     }
  229.  
  230. }
  231.  
  232. // Retrieves the CSS from the current page
  233. function webdeveloper_retrieveCSS()
  234. {
  235.     var contentDocument  = webdeveloper_getContentDocument();
  236.     var documentURL      = contentDocument.documentURI;
  237.     var inlineStylesText = "";
  238.     var result           = null;
  239.     var results          = new Array();
  240.     var resultsLength    = null;
  241.     var stringBundle     = document.getElementById("webdeveloper-string-bundle");
  242.     var styleElement     = null;
  243.     var styleSheet       = null;
  244.     var styleSheetList   = webdeveloper_getStyleSheetsForDocument(contentDocument, true, false);
  245.     var styleSheetLength = styleSheetList.length;
  246.     var tab              = null;
  247.     var tabPanel         = null;
  248.     var tabs             = document.getElementById("webdeveloper-edit-css-tabs");
  249.     var tabPanels        = document.getElementById("webdeveloper-edit-css-tab-panels");
  250.     var textBox          = null;
  251.     var textBoxStyle     = "";
  252.     var url              = Components.classes["@mozilla.org/network/standard-url;1"].createInstance(Components.interfaces.nsIURL);
  253.  
  254.     url.spec = documentURL;
  255.  
  256.     // If the edit background color preference is set
  257.     if(webdeveloper_isPreferenceSet("webdeveloper.edit.color.background"))
  258.     {
  259.         textBoxStyle += "background-color: " + webdeveloper_getStringPreference("webdeveloper.edit.color.background", true) + " !important; ";
  260.     }
  261.  
  262.     // If the edit text color preference is set
  263.     if(webdeveloper_isPreferenceSet("webdeveloper.edit.color.text"))
  264.     {
  265.         textBoxStyle += "color: " + webdeveloper_getStringPreference("webdeveloper.edit.color.text", true) + " !important; ";
  266.     }
  267.  
  268.     // If the edit font preference is set
  269.     if(webdeveloper_isPreferenceSet("webdeveloper.edit.font.size"))
  270.     {
  271.         textBoxStyle += "font-size: " + webdeveloper_getIntegerPreference("webdeveloper.edit.font.size", true) + "px !important; ";
  272.     }
  273.  
  274.     textBoxStyle = textBoxStyle.trim();
  275.  
  276.     // Loop through the style sheets
  277.     for(var i = 0; i < styleSheetLength; i++)
  278.     {
  279.         styleSheet = styleSheetList[i];
  280.  
  281.         // If this is a valid style sheet, is for the screen, is not an alternate style sheet, is not disabled and is not an inline style sheet
  282.         if(webdeveloper_isValidStyleSheet(styleSheet) && webdeveloper_isMediaStyleSheet(styleSheet, "screen") && !webdeveloper_isAlternateStyleSheet(styleSheet) && !styleSheet.disabled && styleSheet.href && styleSheet.href != documentURL)
  283.         {
  284.             results = webdeveloper_retrieveStyleSheetDetails(styleSheet, textBoxStyle, results);
  285.         }
  286.     }
  287.  
  288.     styleSheetList   = contentDocument.getElementsByTagName("style");
  289.     styleSheetLength = styleSheetList.length;
  290.  
  291.     // Loop through the inline style sheets
  292.     for(i = 0; i < styleSheetLength; i++)
  293.     {
  294.         styleElement = styleSheetList[i];
  295.         styleSheet   = styleElement.sheet;
  296.  
  297.         // If this is a valid style sheet, is for the screen and is not disabled
  298.         if(webdeveloper_isValidStyleSheet(styleSheet) && (!styleElement.hasAttribute("id") || styleElement.getAttribute("id").indexOf("webdeveloper-") != 0) && webdeveloper_isMediaStyleSheet(styleSheet, "screen") && !styleSheet.disabled)
  299.         {
  300.             inlineStylesText += styleElement.innerHTML.trim() + "\n\n";
  301.  
  302.             styleSheet.disabled = true;
  303.         }
  304.     }
  305.  
  306.     // If there are inline styles
  307.     if(inlineStylesText != "")
  308.     {
  309.         tab      = document.createElement("tab");
  310.         tabPanel = document.createElement("tabpanel");
  311.         textBox  = document.createElement("textbox");
  312.  
  313.         tab.setAttribute("label", stringBundle.getString("webdeveloper_embeddedStyles"));
  314.         textBox.setAttribute("flex", "1");
  315.         textBox.setAttribute("multiline", "true");
  316.         textBox.setAttribute("style", textBoxStyle);
  317.         textBox.setAttribute("value", inlineStylesText);
  318.         textBox.setAttribute("webdeveloper-base", url.directory);
  319.  
  320.         // If the edit CSS wrap preference is not set to true
  321.         if(!webdeveloper_getBooleanPreference("webdeveloper.edit.wrap", true))
  322.         {
  323.             textBox.setAttribute("wrap", "off");
  324.         }
  325.  
  326.         tabPanel.appendChild(textBox);
  327.         results.push(new Array(tab, tabPanel));
  328.     }
  329.  
  330.     resultsLength = results.length;
  331.  
  332.     // Loop through the results
  333.     for(i = 0; i < resultsLength; i++)
  334.     {
  335.         result = results[i];
  336.  
  337.         tabPanels.appendChild(result[1]);
  338.         tabs.appendChild(result[0]);
  339.     }
  340.  
  341.     // If there are no tabs
  342.     if(tabs.childNodes.length == 0)
  343.     {
  344.         tab      = document.createElement("tab");
  345.         tabPanel = document.createElement("tabpanel");
  346.         textBox  = document.createElement("textbox");
  347.  
  348.         tab.setAttribute("label", stringBundle.getString("webdeveloper_editCSS"));
  349.         textBox.setAttribute("flex", "1");
  350.         textBox.setAttribute("multiline", "true");
  351.         textBox.setAttribute("style", textBoxStyle);
  352.         textBox.setAttribute("webdeveloper-base", url.directory);
  353.  
  354.         // If the edit CSS wrap preference is not set to true
  355.         if(!webdeveloper_getBooleanPreference("webdeveloper.edit.wrap", true))
  356.         {
  357.             textBox.setAttribute("wrap", "off");
  358.         }
  359.  
  360.         tabPanel.appendChild(textBox);
  361.         tabPanels.appendChild(tabPanel);
  362.         tabs.appendChild(tab);
  363.     }
  364.  
  365.     tabs.selectedIndex = 0;
  366.  
  367.     webdeveloper_applyCSS();
  368. }
  369.  
  370. // Retrieves the style sheet details
  371. function webdeveloper_retrieveStyleSheetDetails(styleSheet, textBoxStyle, results)
  372. {
  373.     var styleSheetHref = styleSheet.href;
  374.     var position       = styleSheetHref.lastIndexOf("/");
  375.     var stylesText     = webdeveloper_retrieveSource(styleSheetHref);
  376.     var tab            = document.createElement("tab");
  377.     var tabPanel       = document.createElement("tabpanel");
  378.     var textBox        = document.createElement("textbox");
  379.     var url            = Components.classes["@mozilla.org/network/standard-url;1"].createInstance(Components.interfaces.nsIURL);
  380.  
  381.     url.spec = styleSheetHref;
  382.  
  383.     tab.setAttribute("label", url.fileName);
  384.     textBox.setAttribute("flex", "1");
  385.     textBox.setAttribute("multiline", "true");
  386.     textBox.setAttribute("style", textBoxStyle);
  387.     textBox.setAttribute("value", stylesText);
  388.     textBox.setAttribute("webdeveloper-base", url.directory);
  389.  
  390.     // If the edit CSS wrap preference is not set to true
  391.     if(!webdeveloper_getBooleanPreference("webdeveloper.edit.wrap", true))
  392.     {
  393.         textBox.setAttribute("wrap", "off");
  394.     }
  395.  
  396.     tabPanel.appendChild(textBox);
  397.     results.push(new Array(tab, tabPanel));
  398.  
  399.     styleSheet.disabled = true;
  400.  
  401.     return results;
  402. }
  403.  
  404. // Saves the CSS
  405. function webdeveloper_saveCSS()
  406. {
  407.     var filePicker   = Components.classes["@mozilla.org/filepicker;1"].createInstance(Components.interfaces.nsIFilePicker);
  408.     var result       = null;
  409.     var stringBundle = document.getElementById("webdeveloper-string-bundle");
  410.     var styleText    = webdeveloper_getSelectedPanel().firstChild.value;
  411.  
  412.     filePicker.defaultExtension = "css";
  413.     filePicker.defaultString    = webdeveloper_getSelectedTab().getAttribute("label");
  414.  
  415.     filePicker.appendFilter(stringBundle.getString("webdeveloper_styleSheetDescription"), "*.css");
  416.     filePicker.init(window, stringBundle.getString("webdeveloper_saveStyleSheet"), filePicker.modeSave);
  417.  
  418.     result = filePicker.show();
  419.  
  420.     // If the user selected a style sheet
  421.     if(result == filePicker.returnOK || result == filePicker.returnReplace)
  422.     {
  423.         var file         = filePicker.file;
  424.         var outputStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
  425.  
  426.         // If the file does not exist
  427.         if(!file.exists())
  428.         {
  429.             file.create(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 00644);
  430.         }
  431.  
  432.         outputStream.init(file, 0x04 | 0x08 | 0x20, 00644, null);
  433.         outputStream.write(styleText, styleText.length);
  434.         outputStream.close();
  435.     }
  436. }
  437.  
  438. // Searches the CSS
  439. function webdeveloper_searchCSS()
  440. {
  441.     var searchText = document.getElementById("webdeveloper-search-dashboard-text").value;
  442.  
  443.     // If the search text is set
  444.     if(searchText)
  445.     {
  446.         webdeveloper_getSelectedPanel().firstChild.focus();
  447.  
  448.         // If the search failed to find a match
  449.         if(!window.find(searchText, false, false, true, false, false, false))
  450.         {
  451.             webdeveloper_getSelectedPanel().firstChild.setSelectionRange(0, 0);
  452.             window.find(searchText, false, false, true, false, false, false);
  453.         }
  454.     }
  455. }
  456.  
  457. // Searches the CSS when the enter key is pressed
  458. function webdeveloper_searchTextKeyPress(event)
  459. {
  460.     var keyCode = event.keyCode;
  461.  
  462.     // If the key code is set and is 13
  463.     if(keyCode && keyCode == 13)
  464.     {
  465.         webdeveloper_searchCSS();
  466.     }
  467. }
  468.  
  469. // Toggles sticking the CSS
  470. function webdeveloper_toggleStickCSS()
  471. {
  472.     webdeveloper_setBooleanPreference("webdeveloper.edit.stick", !webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true));
  473.  
  474.     webdeveloper_updateStickCSS();
  475. }
  476.  
  477. // Uninitializes edit CSS
  478. function webdeveloper_uninitializeEditCSS()
  479. {
  480.     var windowContent = window.top.getBrowser();
  481.  
  482.     webdeveloper_editCSSOldStyleText = new Array();
  483.  
  484.     webdeveloper_resetDocument(webdeveloper_getContentDocument());
  485.     window.clearInterval(webdeveloper_editCSSIntervalId);
  486.  
  487.     // Try to remove the event listener
  488.     try
  489.     {
  490.         document.getElementById("webdeveloper-search-dashboard-text").removeEventListener("keypress", webdeveloper_searchTextKeyPress, false);
  491.     }
  492.     catch(exception)
  493.     {
  494.         // Do nothing
  495.     }
  496.  
  497.     // If the window content is set
  498.     if(windowContent)
  499.     {
  500.         var tabBox = windowContent.mTabBox;
  501.             
  502.         // Try to remove the event listener
  503.         try
  504.         {
  505.             windowContent.removeEventListener("load", webdeveloper_editCSSPageLoad, true);
  506.         }
  507.         catch(exception)
  508.         {
  509.             // Do nothing
  510.         }
  511.  
  512.         // If the tab box is set
  513.         if(tabBox)
  514.         {
  515.             // Try to remove the event listener
  516.             try
  517.             {
  518.                 tabBox.removeEventListener("select", webdeveloper_editCSSTabSelect, false);
  519.             }
  520.             catch(exception)
  521.             {
  522.                 // Do nothing
  523.             }
  524.         }
  525.     }
  526. }
  527.  
  528. // Updates the stick CSS button
  529. function webdeveloper_updateStickCSS()
  530. {
  531.     var element      = document.getElementById("webdeveloper-stick-dashboard");
  532.     var labelValue   = null;
  533.     var stick        = webdeveloper_getBooleanPreference("webdeveloper.edit.stick", true);
  534.     var stringBundle = document.getElementById("webdeveloper-string-bundle");
  535.  
  536.     // If the element exists
  537.     if(element)
  538.     {
  539.         // If sticking the CSS
  540.         if(stick)
  541.         {
  542.             labelValue = stringBundle.getString("webdeveloper_unstick");
  543.  
  544.             element.setAttribute("class", "unstick webdeveloper-dashboard-button");
  545.         }
  546.         else
  547.         {
  548.             labelValue = stringBundle.getString("webdeveloper_stick");
  549.  
  550.             element.setAttribute("class", "webdeveloper-dashboard-button");
  551.         }
  552.  
  553.         element.setAttribute("tooltiptext", labelValue);
  554.     }
  555. }